import React from "react";
import { IMG_BASE, JUMP_URL } from "@constants";
import { px2rem, inIos } from "@utils/tools";

import  "./video.less";

var innerHeight= 0;

class App extends React.PureComponent {
  state = {
    isplay:false,
  };
  videoArr = [];
  targetVideo = null;
  componentDidMount() {
    // setTimeout(this.fullScreen.bind(this),3100)
    if(this.props.onRef){//如果父组件传来该方法 则调用方法将子组件this指针传过去
      this.props.onRef(this)
    }  
  }

  play(index) {
    if (this.videoArr[0]) {
      this.targetVideo = this.videoArr[index];
      this.targetVideo.play();
    }
  }

  onPlayerReady(video) {
    this.targetVideo = video;
  }

  saveVideoObj(video) {
    var arr = [...this.videoArr];
    arr.push(video);
    this.videoArr = arr;
    console.log(this.videoArr, "videoArr");
  }
  
  playFn=()=>{
    var _this=this;
    _this.targetVideo.play();
    _sdi.stat({ptype:'7',stype:_this.props.videoIndex});
    this.checkVideoRun(this.targetVideo,()=>{
      _this.setState({
        isplay:true,
        isVideoRun:false,
      })
    })
  }

  pauseFn=()=>{
    this.targetVideo.pause();
    
    this.setState({
      isplay:false,
    })
  }

  checkVideoRun=(video,cb)=>{
    var _this =  this;
      // alert("轮询video播放状态"+index)
      var checkTime = setInterval(()=>{
        _this.setState({
          isVideoRun:true,
        })
      if(video.currentTime>0.05){
        clearInterval(checkTime)
         cb();
      }
    },200)

  }

  playTigger=()=>{
    var {isplay} = this.state;
    var {videoIndex} = this.props;
    var _this=this;
  
    if(!isplay){
      _sdi.stat({ptype:'7',stype:this.props.videoIndex});
      if(!window.swiperVideosReady){
        window.swiperVideosReady=true
        for (let index = 1; index <= 3; index++) {
          if(videoIndex==index){
            this.targetVideo.play();
            this.checkVideoRun(this.targetVideo,()=>{
              _this.setState({
                isplay:true,
                isVideoRun:false,
              })
            })
          }else{
            setTimeout(() => {
              window.videoArrForCyr[index-1].targetVideo.play();
              window.videoArrForCyr[index-1].targetVideo.pause();
              }, 300);
          }
          videoArrForCyr[index-1].targetVideo.addEventListener('error', function(e) {
            console.log('视频出错了')
            console.log(e)
            // alert(index)
            videoArrForCyr[index-1].targetVideo.load();
            videoArrForCyr[index-1].targetVideo.play();
            videoArrForCyr[index-1].targetVideo.pause();
          })
        }
      }else{
        this.targetVideo.play();
        this.checkVideoRun(this.targetVideo,()=>{
          _this.setState({
            isplay:true,
            isVideoRun:false,
          })
        })
      }
    }else{
      this.targetVideo.pause();
      _this.setState({
        isplay:false,
      })
    }
  }

  
  render = () => {
    console.log(IMG_BASE, "IMG_BASEIMG_BASE");
    var {videoIndex,bottomChange=false} = this.props;
    var {isplay,isVideoRun} = this.state;
    var ios = inIos();
    innerHeight = window.innerHeight;
    
    return (
     
        <div className="videoConBox_cyr" style={{height:innerHeight+"px"}}>
          <div className="ralBox">
            <div className="videoBox">
                <img src={`${IMG_BASE}play.png`} 
                  style={{transform:"translate3D(-50%,-50%,100px)"}}
                className={`playBtn ${!isplay&&!isVideoRun?'showbox':''} `} alt="" onClick={this.playTigger.bind(this)}/>
                {/* <img src={`${IMG_BASE}stop.png`} className="stopBtn" alt=""/> */}
                <div className="vConImgBox" style={{zIndex:"20",marginTop:bottomChange?"1.5%":"0%"}}  onClick={this.playTigger.bind(this)}>
                   <img src={`${IMG_BASE}case${videoIndex}VideoImg.png`} className={`videoImgBox`}/>
                </div>
                <div className="loadingBox" style={{opacity:isVideoRun?"1":"0",visibility:isVideoRun?"visible":"hidden",transform:"translateZ(100px)"}}
                    >
                        <div className="loadingConBox">
                          <div className="loadItem loadItem1"></div>
                          <div className="loadItem loadItem2"></div>
                          <div className="loadItem loadItem3"></div>
                          <div className="loadItem loadItem4"></div>
                        </div>
                    </div>
                <div className="vConImgBox" style={{marginTop:bottomChange?"1.5%":"0%"}} >
                  <img src={`${IMG_BASE}case${videoIndex}VideoImg.png`} className={`videoImgBox`}/>
                  <img src={`${IMG_BASE}case${videoIndex}VideoImg.png`} className={` videoImgBoxPosition ${!isplay?'showbox':''}`} 
                      style={{transform:"translate3D(0%,0%,100px)"}}
                  alt=""/>
                  <video 
                  ref={(node)=>{this.targetVideo = node}} 
                  src={`${IMG_BASE}videoXYR${videoIndex}.mp4`}
                  style={this.props.style}
                  playsInline={true}
                  controls={false}
                  preload={"auto"}
                  webkit-playsinline=""
                  x5-video-player-type="h5"
                  onPause={this.pauseFn.bind(this)}
                  className="videoCon"
                    onClick={this.playTigger.bind(this)}
                  >
                  </video>
                </div>
                <img src={`${IMG_BASE}phone.png`} style={{marginTop:bottomChange?"1.5%":"0%",transform:"translate3D(-50%,-50%,100px)"}} className="phoneBox" alt=""/>
                <img src={`${IMG_BASE}case${videoIndex}Bg.png`} className="phoneBgBox" alt=""/>

            </div>
            <div className="videoConText">
              <img src={`${IMG_BASE}case${videoIndex}Text.png`} className="phoneTextBox" alt=""/>
            </div>
            
          </div>
        </div>
                  
    );
  };
}

export default App;
